<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
		  background: #182028;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  height: 100vh;
		  margin: 0;
		  align-items: center;
		}
		
		h1 {
		  font-size: 9vmin;
		  color: #ffaa7f;
		  text-align: left;
		  font-family: Lato, sans-serif;
		  font-weight: 700;
		  margin: 1rem 0 1rem 2rem;
		}
		
		@keyframes typing {
		  0.0000%, 27.3488% { content: ""; }
		  1.1395%, 26.2093% { content: "s"; }
		  2.2791%, 25.0698% { content: "su"; }
		  3.4186%, 23.9302% { content: "sus"; }
		  4.5581%, 22.7907% { content: "susu"; }
		  5.6977%, 21.6512% { content: "susui"; }
		  6.8372%, 20.5116% { content: "susuic"; }
		  7.9767%, 19.3721% { content: "susuico"; }
		  9.1163%, 18.2326% { content: "susuicon"; }
		  10.2558%, 17.0930% { content: "susuicon"; }
		
		  30.7674%, 51.2791% { content: ""; }
		  31.9070%, 50.1395% { content: "b"; }
		  33.0465%, 49.0000% { content: "be"; }
		  34.1860%, 47.8605% { content: "bea"; }
		  35.3256%, 46.7209% { content: "beau"; }
		  36.4651%, 45.5814% { content: "beaut"; }
		  37.6047%, 44.4419% { content: "beauty"; }
		
		  54.6977%, 75.2093% { content: ""; }
		  55.8372%, 74.0698% { content: "c"; }
		  56.9767%, 72.9302% { content: "co"; }
		  58.1163%, 71.7907% { content: "cod"; }
		  59.2558%, 70.6512% { content: "code"; }
		  60.3953%, 69.5116% { content: "coder"; }
		  61.5349%, 68.3721% { content: "coder"; }
		
		  78.6279%, 97.8605% { content: ""; }
		  79.7674%, 96.7209% { content: "w"; }
		  80.9070%, 95.5814% { content: "wa"; }
		  81.9070%, 94.5814% { content: "wac"; }
		  82.0465%, 93.4419% { content: "wact"; }
		  83.1860%, 92.3023% { content: "wacth"; }
		  84.3256%, 91.1628% { content: "watche"; }
		  85.3256%, 90.1628% { content: "watcher"; }
		}
		
		@keyframes blink {
		  0%, 100% { opacity: 1; }
		  50% { opacity: 0; }
		}
		
		.typewriter {
		  --caret: currentcolor;
		}
		
		.typewriter::before {
		  content: "";
		  animation: typing 13.5s infinite;
		}
		
		.typewriter::after {
		  content: "";
		  border-right: 1px solid var(--caret);
		  animation: blink 0.5s linear infinite;
		}
		
		.typewriter.thick::after {
		  border-right: 1ch solid var(--caret);
		}
		
		.typewriter.nocaret::after {
		  border-right: 0;
		}
		
		/* 用户开启减少动效 */
		@media (prefers-reduced-motion) {
		  .typewriter::after {
		    animation: none;
		  }
		  
		  @keyframes sequencePopup {
		    0%, 100% { content: "susuicon"; }
		    25% { content: "beauty"; }
		    50% { content: "coder"; }
		    75% { content: "watcher"; }
		  }
		
		  .typewriter::before {
		    content: "susuicon";
		    animation: sequencePopup 12s linear infinite;
		  }
		}
	</style>
	<body>
		<!-- <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet"> -->
		<h1>
		  Hi! I'm &nbsp;<span class="typewriter"></span>
		</h1>
		
		<h1>
		  Hi! I'm &nbsp;<span class="typewriter thick"></span>
		</h1>
		
		<h1 >
		  Hi! I'm &nbsp;<span class="typewriter nocaret"></span>
		</h1>
	</body>
</html>
